/*
 * @Author: Wilbur
 * @Date: 2019-08-12 09:59:44
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-08-23 13:51:29
 */

<template>
    <div class="container task-list-container">
        <div class="operation-wrapper">
            <div class="operation-wrapper-left">
                <p style="color:#606266;marginRight:4px">是否过滤:</p>
                <el-select
                    v-model="school_filter_status"
                    filterable
                    placeholder="请选择"
                    style="width: 152px"
                    size="small"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <div class="header-box">
                    <p class="header-box-title">banner名称:</p>
                    <el-input
                        v-model="title"
                        placeholder="请输入banner名称"
                        suffix-icon="el-icon-search"
                        size="small"
                        clearable
                        @change="getTableData(1)"
                        @keydown.native.enter="getTableData(1)"
                    />
                </div>
                <div class="header-box">
                    <p class="header-box-title">banner编号:</p>
                    <el-input
                        v-model="banner_no"
                        placeholder="请输入编号"
                        suffix-icon="el-icon-search"
                        size="small"
                        clearable
                        @change="fnChangeBannerNo(true)"
                        @input="fnChangeBannerNo(false)"
                        @keyup.native.enter="fnChangeBannerNo(true)"
                    />
                </div>
                <div class="header-box">
                    <p style="color:#606266;marginRight:4px">状态:</p>
                    <el-select
                        v-model="show_status"
                        filterable
                        placeholder="请选择"
                        size="small"
                        style="width: 152px"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in showStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="header-box">
                    <p style="color:#606266;marginRight:4px">banner类型:</p>
                    <el-select
                        v-model="type"
                        filterable
                        placeholder="请选择"
                        size="small"
                        style="width: 152px"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
            <el-button
                type="primary"
                @click="handleRoute(false)"
                size="small">新增轮播图</el-button>
        </div>
        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="title"
                        width="150"
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        label="banner名称"/>
                    <el-table-column
                        width="180"
                        label="图片">
                        <template slot-scope="scope">
                            <img
                                :src="scope.row.image_url"
                                class="table-image">
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="链接">
                        <template slot-scope="scope">
                            <template v-if="scope.row.image_url != ''">
                                <a
                                    :href="scope.row.image_url"
                                    class="table-link"
                                    :disabled="scope.row.image_url == '' ? true : false"
                                    target="_blank">查看</a>

                                &nbsp;&nbsp;
                                <a
                                    href="javascript:;"
                                    :disabled="scope.row.image_url == '' ? true : false"
                                    @click="handleInitCopy(scope.row.image_url)"
                                    class="table-link copy-btn">复制</a>
                            </template>
                            <template v-if="scope.row.image_url == ''">
                                --
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="背景颜色"
                        prop="background_color"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <div
                                class="color-wrap"
                                v-if="scope.row.background_color"
                            >
                                <div
                                    class="color-demo"
                                    :style="{backgroundColor: scope.row.background_color}"
                                />
                                <div>{{ scope.row.background_color }}</div>
                            </div>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        show-overflow-tooltip
                        label="作用域"
                    >
                        <template slot-scope="scope">
                            <template>
                                <span>{{ fnComputedText(scope.row.type) }}</span>
                                <span v-if="!(scope.row.type_param == 0) && scope.row.type === 7">-{{ scope.row.type_param.cate_name }}</span>
                                <span v-if="!(scope.row.type_param == 0) && scope.row.type === 9">-{{ scope.row.type_param.type_name }}</span>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="banner_no"
                        show-overflow-tooltip
                        label="编号"
                        :width="170"
                    />
                    <el-table-column
                        prop="start_time"
                        width="150"
                        label="开始时间">
                        <template slot-scope="scope">
                            {{ scope.row.start_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="end_time"
                        width="150"
                        label="结束时间">
                        <template slot-scope="scope">
                            {{ scope.row.end_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="sort"
                        label="排序"
                    >
                        <template slot-scope="scope">
                            <div class="sort-wrap">
                                {{ scope.row.sort }}
                                <span class="sort-spliter" />
                                <el-button
                                    type="text"
                                    class="btn-sort"
                                    style="color: #606266"
                                    @click="fnEditSort(scope.row)"
                                >
                                    <i class="el-icon-edit" />
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        show-overflow-tooltip
                        label="状态">
                        <template slot-scope="scope">
                            <template v-if="scope.row.time_status == 1 && scope.row.status == 1">已显示</template>
                            <template v-else-if="scope.row.time_status == 2">已结束</template>
                            <template v-else-if="scope.row.status == 0 && scope.row.time_status == 1">已隐藏</template>
                            <template v-else-if="scope.row.time_status == 0">未开始</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        show-overflow-tooltip
                        label="是否过滤">
                        <template slot-scope="scope">
                            <p v-if="scope.row.school_filter_status == 1">是</p>
                            <p v-if="scope.row.school_filter_status == 0">否</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="150">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="handleRoute(true, scope)">编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    :disabled="scope.row.time_status == 0 || scope.row.time_status == 2"
                                    @click="fnChangeBidStatus(scope.row.banner_no, scope.row.status, scope.row.type)">
                                    <template v-if="scope.row.time_status == 1 && scope.row.status == 1">隐藏</template>
                                    <template v-else-if="scope.row.time_status == 2 || scope.row.time_status == 0 || scope.row.status == 0">显示</template>
                                </el-button>
                                <el-button
                                    type="text"
                                    @click="fnDelBanner(scope.row.banner_no)">删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
    data() {
        return {
            banner_no: '',
            school_filter_status: 99,
            show_status: 1,
            // banner名称
            title: '',
            // banner类型
            type: 99,
            showStatusList: [{
                value: 99,
                label: '全部'
            },{
                value: 1,
                label: '显示'
            },{
                value: 2,
                label: '隐藏'
            }],
            statusList: [{
                value: 99,
                label: '全部'
            },{
                value: 1,
                label: '是'
            },{
                value: 0,
                label: '否'
            }],
            type_param: [{
                cate_no: '1',
                cate_name: '商圈商品'
            }],
            authResult: {},
            tableData: [],
            filterData: {
                title: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket'),
            time: '',
            typeList: [
                {label: '全部', value: 99},
                {label: '学习', value: 1},
                {label: '工作', value: 2},
                {label: '商城', value: 6},
                {label: '商品组', value: 7},
                {label: '抽奖列表', value: 8},
                {label: '商城商品分类', value: 9},
                {label: '校园精英', value: 10},
                {label: '邀请有礼', value: 11},
            ]
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';

        this.getparam();
        this.setHeader();
        this.getTableData();
    },
    mounted() {
    },
    methods: {
        /**
         * 设置标题
         */
        setHeader () {
            this.$store.commit('SET_HEADER', [
                {
                    title: "APP后台",
                },
                {
                    title: 'APP轮播图列表'
                }
            ]);
        },

        /**
         * 获取url参数
         */
        getparam () {
            let query = this.$route.query;

            if (query.page !== undefined) {
                this.page.now_page = Number(query.page);
            }
        },

        /**
         *  修改排序
         */
        fnEditSort(item) {
            this.$prompt('修改排序', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(0|\+?[1-9][0-9]*)$/,
                inputPlaceholder: '请输入序号',
                inputErrorMessage: '请输入正整数',
                closeOnClickModal: false,
            }).then(({ value }) => {

                this.$post('/student/banner%5Cset', {
                    banner_no: item.banner_no,
                    sort: value
                }, resp => {
                    if (resp.code == 1) {
                        this.$set(item, 'sort', value);
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },

        /**
         *  删除
         */
        fnDelBanner(id) {
            this.$confirm('删除该轮播图, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/banner%5Cdelete', {
                    banner_no: id
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData(this.page.now_page);
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        fnGoMembersList(bid_no) {

        },

        /**
         * 显示/隐藏
         */
        fnChangeBidStatus(id, status, type) {
            // console.log(status);
            // if (status == 1) {
            //     let studentIndex = 0,
            //         workIndex = 0,
            //         shopIndex = 0;

            //     this.lunboList.map(item => {
            //         console.log(item);
            //         if (item.type == 1 && item.status == 1 && item.time_status == 1) {
            //             studentIndex ++;
            //         } else if (item.type == 2 && item.status == 1 && item.time_status == 1) {
            //             workIndex ++;
            //         } else if (item.type == 6 && item.status == 1 && item.time_status == 1) {
            //             shopIndex ++;
            //         }
            //     });

            //     console.log(type, 'type',studentIndex, 'studentIndex');

            //     if ( type== 1 && studentIndex == 1) {
            //         this.$message({
            //             type: 'warning',
            //             message: '必须保留并显示一个banner'
            //         });
            //         return ;
            //     } else if (type == 2 && workIndex == 1) {
            //         this.$message({
            //             type: 'warning',
            //             message: '必须保留并显示一个banner'
            //         });
            //         return ;
            //     } else if (type == 6 && shopIndex == 1) {
            //         this.$message({
            //             type: 'warning',
            //             message: '必须保留并显示一个banner'
            //         });
            //         return ;
            //     }
            // }

            this.$post('/student/banner%5Cset_status', {
                banner_no: id,
                status: status == 1 ? 0 : 1
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData(this.page.now_page);
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnComputedText(val) {
            let result = '';

            if(val == 1) {
                result = '学习';
            }else if(val == 2) {
                result = '工作';
            }else if(val == 6) {
                result = '商城';
            }else if(val == 7){
                result = '商城金刚区';
            }else if(val == 8){
                result = '抽奖列表';
            }else if(val == 9){
                result = '商城商品分类';
            }else if(val == 10){
                result = '校园精英';
            }else if(val == 11){
                result = '邀请有礼';
            }else{
                result = '未知';
            }

            return result;
        },
        /**
         * 复制链接
         */
        handleInitCopy(link) {
            var clipboard = new Clipboard('.copy-btn', {
                text: function () {
                    return link;
                }
            });

            clipboard.on('success', e => {
                this.$message({
                    type: 'success',
                    message: '复制成功'
                });
                e.clearSelection();
            });

            clipboard.on('error', e => {
                this.$message({
                    type: 'warning',
                    message: '未复制成功，请手动复制'
                });
            });
        },
        fnChangeBannerNo(submit){
            this.show_status = 99;
            if(submit){
                this.getTableData(1);
            }
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/student/banner%5Cget_list', {
                page_id: page || this.page.now_page,
                title: this.title,
                school_filter_status: this.school_filter_status,
                banner_no: this.banner_no,
                show_status: this.show_status,
                type: this.type
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.type_param = resp.data.type_param;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(param, scope) {
            if (param) {
                this.$router.replace({
                    name: 'AppBannerAdd',
                    query: {
                        banner_id: scope.row.banner_no,
                        page: this.page.now_page
                    }
                });
            } else {
                this.$router.replace({
                    name: 'AppBannerAdd',
                    query: {
                        page: this.page.now_page
                    }
                });
            }

        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    padding: 12px 23px;
    background-color: #fff;
    justify-content: space-between;
    .operation-wrapper-left {
        display: flex;
        height: 32px;
        align-items: center;
        .header-box {
            display: flex;
            margin-right: 15px;
            align-items: center;
            color: #606266;
            margin-left: 20px;
            &-title {
                margin-right: 2px;
                white-space: nowrap;
            }
        }
    }
    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
    .table-image{
        width: 150px;
    }
    .table-link{
        color: #409EFF;
    }
    .el-button {
        padding: 0;
    }
    .icon-bianji{
        font-size: 14px;
        color: #B9B9B9;
        cursor: pointer;
    }
    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
    .submit-config-item {
        display: inline-block;
        position: relative;
        padding-right: 10px;
        font-size: 14px;

        & + .submit-config-item {
            padding-left: 10px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 1px;
                height: 14px;
                transform: translate(0, -50%);
                background-color: #d8d8d8;
            }
        }

        .num {
            vertical-align: middle;
        }
        .iconfont {
            font-size: 16px;
            color: #b9b9b9;
            vertical-align: middle;
        }

        .icon-tupian {
            font-size: 20px;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.dialog-link{
    & + .dialog-link{
        margin-top: 20px;
    }
    .link-label{
        font-weight: 500;
        margin-right: 20px;
    }
}
 .container {
    background-color: #fff;
    padding: 10px 15px 5px 15px;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

 .color-wrap {
     display: flex;
     align-items: center;
     .color-demo {
         width: 24px;
         height: 24px;
         margin-right: 8px;
     }
 }
</style>
<style lang="less">
.task-list-container {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
        }
    }
}
.task-list-preview-popover {
    min-width: auto!important;
    width: 120px!important;
    height: 120px;
    padding: 8px!important;
}
.sort-dialog{
    width: 270px!important;
}
.task-list-container .el-table__body-wrapper .el-table__body .el-table__row td {
    border-right: none;
}
.task-list-container .el-table__header-wrapper .el-table__header .has-gutter tr th {
    border-right: none;
}
.task-list-container .el-table .el-table_1_column_6  .cell {
    position: relative;
}
.task-list-container .el-range-editor--small .el-range-separator{
    padding: 0 1px !important;
}
.task-list-container .el-upload-dragger {
    width: 180px;
    height: 90px;
    background: transparent;
    border: none;
}
</style>
